<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>${s_UserPharmacy.pharmacy.name}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>

<script type="text/javascript">
$(document).ready(function(){
});

	function editProduct(providerId,productId){
		location.href = "productsEdit?_menuId=1&_subMenuId=1&_optionId=3&_providerId="+providerId+"&_productId="+productId;
	}
	function newProducts(){
		location.href = "productsNew?_menuId=1&_subMenuId=1&_optionId=3";
	}
	function showHide(){
	    if( $("#low").css('display') == 'none' ){
	        $("#low").css('display', 'block');
	        $("#showHide").attr('value', 'Ocultar Bajas');
	        $("#showHide").attr('title', 'Pulsa aqui para ocultar bajas')
	    }else{
	        $("#low").css('display', 'none');
	        $("#showHide").attr('value', 'Mostrar Bajas');
	        $("#showHide").attr('title', 'Pulsa aqui para mostrar bajas')
	    }
	}
	
	
	function giveLowProduct(providerId,productId,name){		
		if(confirm("¿Estas seguro de dar de baja al Producto: "+name+"?")){
            $.ajax({
                url: "ajaxGiveLowOrHighToProduct",
                type: "GET",
                data:{providerId:providerId,productId:productId,active:false},
                beforeSend:function(obj){
                    $('#listUser').css({display:'none'});
                    $('#imgLoad').css({display:'block'});
                },
                success:function(res){
                	alert(res);
                	mainProducts();
                },
                complete:function(){
                    $('#imgLoad').css({display:'none'});
                    $("#listUser").css({display:'block'});
                },
                error: function(res){ alert("Error! al dar de Baja"); }
            });
        }
	}
	function giveHighProduct(providerId,productId,name){
		if(confirm("¿Estas seguro de dar de alta al Producto: "+name+"?")){
            $.ajax({
                url: "ajaxGiveLowOrHighToProduct",
                type: "GET",
                data:{providerId:providerId,productId:productId,active:true},
                beforeSend:function(obj){
                    $('#listUser').css({display:'none'});
                    $('#imgLoad').css({display:'block'});
                },
                success:function(res){
                	alert(res);
                	mainProducts();
                },
                complete:function(){
                    $('#imgLoad').css({display:'none'});
                    $("#listUser").css({display:'block'});
                },
                error: function(res){ alert("Error! al dar de Alta"); }
            });
        }
	}
	function mainProducts(){
		location.href = "products?_menuId=1&_subMenuId=1&_optionId=3";
	}
</script>
</head>

<body>
<div id="top-wrap">
	<%@include file="../../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                    <li><a href="<spring:url value="/mainFront?" htmlEscape="true" />">Home</a></li>	
                    <li><span style="color:#666"><fmt:message key="title.configuration"/></span></li>		
                    <li><span style="color:#666"><fmt:message key="title.activePrincipleProducts"/></span></li>		
                    <li class="current-page"><span class="end"><span class="middle"><fmt:message key="title.products"/></span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                <div class="izq">
					<%@include file="../../../bodyIzq.jsp" %>	
                </div>
                
                <div class="medio" style="border: 0px solid">
					<h2 class="decorado"><fmt:message key="title.products"/></h2></br></br> 
					
					<div id="imgLoad" style="float: left;width: 100%;display: none;"><img src="<c:url value="/resources/images/imgLoad/ajax-loader.gif" />" width="32" height="32" alt="ajax-loader.gif" style="position:absolute; top:30%; left:50%;"/></div> 
					<div id="products">
						
						<table class="miReporte" style="width: 100%">
							<tr>
								<td style="text-align: right"><input type="button" class="boton" value="<fmt:message key="button.add"/> <fmt:message key="title.product"/>" onclick="newProducts()" title='<fmt:message key="onclick.add"/> <fmt:message key="title.product"/>.'/></td>
							</tr>
						</table>
						<table class="tabla_decorado" style="width: 100%">
							<thead>
								<tr>
									<th width="3%" class="th_decoradoRowspan"><fmt:message key="table.num"/></th>
									<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.commercialName"/></th>
									<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.genericName"/></th>
									<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.generalIndication"/></th>
									<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.presentation"/></th>
									<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.remarkComposition"/></th>
									<th width="17%" class="th_decoradoRowspan"><fmt:message key="table.actions"/></th>
								</tr>
							</thead>
							<tbody>
								<c:set var="i" value="1"/>
								<c:forEach var="item" items="${listProduct}"> 
									<tr class="tr_decorado">
										<td class="th_decorado" style="text-align: center">${i}</td>
										<td class="th_decorado">${item.name}</td>
										<td class="th_decorado">${item.activeSubstanceId.name}</td>
										<td class="th_decorado">${item.generalIndication}</td>
										<td class="th_decorado">${item.presentation}</td>
										<td class="th_decorado">${item.remarkComposition}</td>
										<td class="td_decoradoDerecha" style="text-align: center">
											<input type="button" value="<fmt:message key="button.edit"/>" onclick="editProduct('${item.productPK.providerId}','${item.productPK.productId}')" class="botonRep" title="<fmt:message key="onclick.edit"/> ${item.name}"/>
											<input type="button" value="<fmt:message key="button.low"/>" onclick="giveLowProduct('${item.productPK.providerId}','${item.productPK.productId}','${item.name}')" class="botonRep" title="<fmt:message key="onclick.low"/> ${item.name}"/>
											<%-- <input type="button" value="<fmt:message key="button.remove"/>" onClick="" class="botonRep" title="<fmt:message key="onclick.remove"/>"/> --%>
										</td>
									</tr>
									<c:set var="j" value="1"/>
									<c:set var="i" value="${i+j}"/>
								</c:forEach>
								<c:if test="${(empty listProduct)}">
	                           		<tr class="tr_decorado">
	                           			<td class="td_decorado" colspan="8" style="text-align:center"><span style="color:red"><fmt:message key="show.noExistSearchProducts"/></span></td>
	                           		</tr>
	                           </c:if> 
							</tbody>
						</table>
						<table class="miReporte" style="width: 100%">
							<tr>
								<td style="text-align: right"><input type="button" name="showHide" id="showHide" value="<fmt:message key="show.low"/>" onclick="showHide()" class="boton" title="<fmt:message key="onclick.show.lows"/>"/></td>
							</tr>
						</table><br/><br/>	
						<div id="low" style="display:none;">
							<h2 class="decorado"><fmt:message key="show.productsGiveLow"/></h2>
							<table class="tabla_decorado" style="width: 100%">
								<thead>
									<tr>
										<th width="3%" class="th_decoradoRowspan"><fmt:message key="table.num"/></th>
										<th width="10%" class="th_decoradoRowspan"><fmt:message key="table.commercialName"/></th>
										<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.genericName"/></th>
										<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.generalIndication"/></th>
										<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.presentation"/></th>
										<th width="15%" class="th_decoradoRowspan"><fmt:message key="table.remarkComposition"/></th>
										<th width="17%" class="th_decoradoRowspan"><fmt:message key="table.actions"/></th>
									</tr>
								</thead>
								<tbody>
									<c:set var="i" value="1"/>
									<c:forEach items="${listProductInActive}" var="item">
										<tr class="tr_decorado">
											<td class="th_decorado" style="text-align: center">${i}</td>
											<td class="th_decorado">${item.name}</td>
											<td class="th_decorado">${item.genericName}</td>
											<td class="th_decorado">${item.generalIndication}</td>
											<td class="th_decorado">${item.presentation}</td>
											<td class="th_decorado">${item.remarkComposition}</td>
											<td class="td_decoradoDerecha" style="text-align: center"><input type="button" value="<fmt:message key="button.high"/>" onclick="giveHighProduct('${item.productPK.providerId}','${item.productPK.productId}','${item.name}')" class="botonRep" title="<fmt:message key="onclick.high"/> ${item.name}"/></td>
										</tr>
										<c:set var="j" value="1"/>
										<c:set var="i" value="${i+j}"/>
									</c:forEach>
									<c:if test="${(empty listProductInActive)}">
		                           		<tr class="tr_decorado">
		                           			<td class="td_decorado" colspan="8" style="text-align:center"><span style="color:red"><fmt:message key="show.noExistSearchProductsGiveLow"/></span></td>
		                           		</tr>
		                           </c:if> 
								</tbody>
							</table>
						</div>									
					</div>	                               
                </div>
            </div><!--end of leftPan-->
            
            <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!--end main content -->
	</div>
</div>
</body>
</html>
